<template>
	<view class="recharge">
		<uni-popup ref="popup" @maskClick="close" type="bottom" border-radius="32rpx 32rpx 0 0">
			<view class="popupsRecharge">
				<view class="popupTitle">
					<view></view>
					<text style="color: #262626;font-size: 32rpx;font-weight: bold;">充值</text>
					<image @tap="close" style="width: 21rpx;height: 21rpx;" src="../../static/img/close.png">
					</image>
				</view>
				<view class="rechargeWrap">
					<view @tap="toRecharge(item.price,index)" v-for="(item,index) in rechargeList" :key="index"
						class="recharge" :class="{beRecharge:index==rechargeIndex}"
						:style="{ marginLeft: (index === 0 || index === 3) ? '0rpx' : '24rpx' }">
						<text class="rechargeTitle">{{item.rechargeDesc}}</text>
						<text class="rechargeVal">{{item.rechargeName}}</text>
					</view>
				</view>
				<view class="typeWrap">
					<view @tap="chooseType(item)" v-for="(item,index) in paymentChannels" :key="index" class="type">
						<view class="types">
							<image class="typeImg" :src="'/static/img/index/'+item.icon+'.png'" mode="widthFix"></image>
							<text class="typeText">{{item.name}}</text>
						</view>
						<view class="types types1">
							<image class="chooseType"
								:src="data.payChannel == item.value?'/static/img/index/49.png':'/static/img/index/52.png'"
								mode="widthFix">
							</image>
						</view>
					</view>
				</view>
				<view class="moneyWraps">
					<view class="moneyWrap">
						<view style="display: flex;flex-direction: column;">
							<text style="color: #262626;font-size: 24rpx;">实付现金（元）</text>
							<text
								style="color: #FF263F;font-size: 36rpx;font-weight: 36rpx;">{{rechargeList.length &&  rechargeList[rechargeIndex].price}}</text>
						</view>
						<view @tap="pay" class="liji">立即支付</view>
					</view>
				</view>
				<!-- 				<view class="lastWrap">
					<radio :checked="isAgree" style="transform: scale(0.7);" @tap="isAgree = !isAgree"></radio>
					<text style="color: #262626;font-size: 28rpx;">已阅读并同意 <text @tap="toAgreement(index)"
							v-for="(item,index) in agreementList" :key="index" style="color: #168aff;"><text
								v-if="index!=0" style="margin: 0 5rpx 0 5rpx;">和</text>{{item.agreementTitle}}</text>
					</text>
				</view> -->
			</view>
		</uni-popup>
	</view>
	<SanshuiPaymentPassword v-if="data.show1" :onConfirm="data.onConfirm" :onCancel="()=>{data.show1 = false}" />
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import SanshuiPaymentPassword from '@/components/sanshui-payment-password/sanshui-payment-password.vue'
	import { paymentChannels, payment } from '@/utils/index'
	import { listRechargeListDiamond, queryAgreement, rechargeDiamond } from '@/utils/api/index.ts';
	// 关闭返回
	const close = () => {
		uni.navigateBack({
			success: function () {
				uni.$emit('refreshData', { trendsId: trendsId.value });
			}
		})
	}
	const rechargeList = ref<any>([])
	const getList = async () => {
		const data = await listRechargeListDiamond()
		rechargeList.value = data.data
	}
	const rechargeIndex = ref<number | null>(0)
	const rechargeVal = ref(0)
	const toRecharge = (price : number, index : number) => {
		rechargeIndex.value = index
		rechargeVal.value = price
	}
	const data = reactive<any>({
		payChannel: paymentChannels[0].value,
		onConfirm: () => { },
	})

	const chooseTypeIndex = ref<number | null>(null)
	const chooseType = (item) => {
		data.payChannel = item.value
		// typeList.value.map((item : any) => {
		// 	item.key = false
		// })
		// typeList.value[index].key = true
		// chooseTypeIndex.value = index
	}
	const isAgree = ref(false)
	const trendsId = ref('')
	const popup = ref<InstanceType<typeof Popup> | null>(null);
	const agreementList = ref([])
	const loadAgreement = async () => {
		const res = await queryAgreement({
			data: {
				agreementType: 'RECHARGE'
			}
		})
		agreementList.value = res.data
	}
	const toAgreement = (index : number) => {
		uni.navigateTo({
			url: `/pages/my/serviceAgreement?agreementId=${agreementList.value[index].id}`
		})
	}
	const pay = () => {
		if (data.payChannel == 'WALLET') {
			data.show1 = true;
			data.onConfirm = (e) => {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				rechargeDiamond({ data: { diamondId: rechargeList.value[rechargeIndex.value].id, payChannel: data.payChannel, payPwd: e } }).then((res) => {
					if (res.code == 200) {
						payment(data.payChannel, res.data).then((res) => {
							setTimeout(() => {
								uni.$emit('successful')
								uni.navigateBack()
							}, 1000)
						})
						uni.hideLoading()
					}
				})
			}
			return
		}
		uni.showLoading({
			title: '加载中...',
			mask: true
		})
		rechargeDiamond({ data: { diamondId: rechargeList.value[rechargeIndex.value].id, payChannel: data.payChannel } }).then((res) => {
			if (res.code == 200) {
				payment(data.payChannel, res.data).then((res) => {
					setTimeout(() => {
						uni.$emit('successful')
						uni.navigateBack()
					}, 1000)
				})
				uni.hideLoading()
			}
		})
	}
	onLoad(async (option) => {
		trendsId.value = option.id
		await getList()
		loadAgreement()
		popup.value.open('bottom')
	})
</script>

<style>
	page {
		background: transparent;
	}
	.recharge{
		.bg-color {
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: rgba(0, 0, 0, 0.5);
		}
		
		.rewardWrap {
			width: 100%;
			padding-bottom: 200rpx;
			background: #161824;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
		}
		
		.titleWrap {
			width: 100%;
			height: 102rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.title {
			font-size: 36rpx;
			color: #fff;
			font-weight: bold;
		}
		
		.numWrap {
			width: 100%;
			height: 102rpx;
			display: flex;
		}
		
		.num {
			width: 176rpx;
			height: 102rpx;
			background: rgba(255, 255, 255, 0.06);
			border-radius: 16rpx;
			margin-left: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}
		
		.numInput {
			width: 60%;
			height: 102rpx;
			text-align: center;
			display: flex;
			justify-content: center;
			color: #fff;
		}
		
		.numTop {
			font-size: 28rpx;
			color: #fff;
			font-weight: bold;
		}
		
		.numBottom {
			font-size: 24rpx;
			color: rgba(255, 255, 255, 0.60);
		}
		
		.giftWrap {
			width: 100%;
			margin-top: 23rpx;
			display: flex;
			flex-wrap: wrap;
		}
		
		.chooseWrap {
			width: 175rpx;
			height: 260rpx;
			border-radius: 16rpx;
			margin-left: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}
		
		.beChoose {
			background: url('../../static/img/gifdBJ.png') no-repeat;
			background-size: cover;
		}
		
		.icon {
			width: 120rpx;
			height: 120rpx;
			margin-top: 20rpx;
		}
		
		.iconName {
			font-size: 20rpx;
			color: rgba(255, 255, 255, 0.60);
			margin-top: 10rpx;
		}
		
		.giftPrice {
			font-size: 20rpx;
			color: rgba(255, 255, 255, 0.80);
			margin-top: 10rpx;
		}
		
		.give {
			width: 175rpx;
			height: 44rpx;
			margin-top: 15rpx;
			background: #FF263F;
			border-radius: 0rpx 0rpx 16rpx 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.giveText {
			font-size: 16rpx;
			font-weight: bold;
			color: #fff;
		}
		
		.payWrap {
			width: 100%;
			height: 96rpx;
			background: #22242f;
			position: fixed;
			bottom: 68rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		
		.payLeft {
			height: 96rpx;
			display: flex;
			align-items: center;
		}
		
		.diamond {
			width: 24rpx;
			height: 24rpx;
			margin-left: 34rpx;
		}
		
		.diamondNum {
			font-size: 24rpx;
			color: #fff;
		}
		
		.chong {
			color: #6B64D3;
			font-size: 28rpx;
			font-weight: bold;
			margin-left: 24rpx;
		}
		
		.payRight {
			width: 190rpx;
			height: 80rpx;
			background: #FF263F;
			border-radius: 40rpx;
			margin-right: 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.payTxt {
			font-size: 32rpx;
			color: #fff;
			font-weight: bold;
		}
		
		.bar {
			width: 100%;
			height: 68rpx;
			background: #22242f;
			position: fixed;
			bottom: 0;
		}
		
		.popupsRecharge {
			width: 100%;
			/* height: 1004rpx; */
			padding-bottom: 20rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
		}
		
		.popupTitle {
			width: 92%;
			margin-left: 4%;
			height: 96rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		
		.rechargeWrap {
			width: 92%;
			margin-left: 4%;
			display: flex;
			flex-wrap: wrap;
		}
		
		.recharge {
			width: 213rpx;
			height: 154rpx;
			background: #F4F6FA;
			border-radius: 24rpx;
			margin-top: 24rpx;
			display: flex;
			align-items: center;
			flex-direction: column;
		}
		
		.beRecharge {
			background: #FFDED3;
			color: #FF263F;
		}
		
		.rechargeInput {
			width: 213rpx;
			height: 154rpx;
			text-align: center;
		}
		
		.rechargeTitle {
			font-size: 28rpx;
			color: #262626;
			margin-top: 24rpx;
		}
		
		.rechargeVal {
			color: #BFBFBF;
			font-size: 28rpx;
			margin-top: 16rpx;
		}
		
		.typeWrap {
			width: 92%;
			margin-top: 32rpx;
			margin-left: 4%;
			border-top: 1rpx solid #F4F6FA;
		}
		
		.type {
			width: 100%;
			height: 64rpx;
			margin-top: 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		
		.types {
			height: 64rpx;
			display: flex;
			align-items: center;
		}
		
		.types1 {
			image {
				width: 36rpx;
			}
		}
		
		.typeImg {
			width: 48rpx;
		}
		
		.typeText {
			color: #262626;
			font-size: 28rpx;
			margin-left: 8rpx;
		}
		
		.chooseType {
			width: 36rpx;
			height: 36rpx;
		}
		
		.moneyWraps {
			width: 100%;
			height: 106rpx;
			margin-top: 32rpx;
			border-top: 2rpx solid #F4F6FA;
		}
		
		.moneyWrap {
			width: 92%;
			height: 106rpx;
			margin-left: 4%;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		
		.liji {
			width: 190rpx;
			height: 80rpx;
			background: #FF263F;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			font-size: 32rpx;
			color: #fff;
		}
		
		.lastWrap {
			width: 100%;
			height: 42rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	
</style>